<template>
    <div class="bill-list-content">
        <ul class="bill-list-info">
            <li @click="jumpDetail(item.tradingId)" v-for="(item, index) in listData" :key="index">
                <div class="bill-list-info-left">
                    <img src="../../../assets/img/bill_icon1.png" alt="" v-if="item.actCode == 1 || item.actCode == 5">
                    <img src="../../../assets/img/bill_icon2.png" alt="" v-if="item.actCode == 2">
                    <img src="../../../assets/img/bill_icon3.png" alt="" v-if="item.actCode == 3">
                    <img src="../../../assets/img/bill_icon4.png" alt="" v-if="item.actCode == 4">
                    <img src="../../../assets/img/bill_icon5.png" alt="" v-if="item.actCode == 6">
                    <div class="bill-list-info-left-content">
                        <p>{{item.actName}}</p>
                        <p>{{item.actTime}}</p>
                    </div>
                </div>
                <div class="bill-list-info-right">
                    <span>{{item.actCategory == 1 ? '-' : '+'}}{{item.actMoney}}元</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['listData'],
    data() {
        return {
            
        }
    },
    methods: {
        jumpDetail(id) {
            this.$router.push({
                path: '/my/bill/billDetail/' + id
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .bill-list-content {
        width: 100%;
        .bill-list-info {
            li {
                width: 100%;
                padding: 20px 16px 20px 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f2f2f2;
                .bill-list-info-left {
                    display: flex;
                    align-items: center;
                    img {
                        width: 60px;
                        height: 60px;
                        object-fit: cover;
                        margin-right: 8px;
                    }
                    .bill-list-info-left-content {
                        width: 150px;
                        p {
                            &:first-child {
                                margin-bottom: 6px;
                                font-size: 16px;
                            }
                            &:last-child {
                                color: #969C9E;
                            }
                        }
                    }
                }
                .bill-list-info-right {
                    display: flex;
                    margin-left: 10px;
                    align-items: center;
                    span {
                        padding-right: 4px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
</style>